<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>
<style>
  html,
  body,
  #pageBox {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  #app {
    width: 100%;
    height: 100%;
  }

  #pageLoading {
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
</style>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong>
  </noscript>
  <div id="pageBox" class="pageBox">
    <div id="pageLoading">
      <img
        src="<%= process.env.NODE_ENV==='development' ? 'http://127.0.0.1' : '' %>/public_web/static/images/common/loading.gif"
        style="transform: scale(0.3)" />
    </div>
    <div id="app"></div>
  </div>
</body>

</html>